<template>
  <div>
    <div class="news-detail">
      <h2>{{ news.title }}</h2>
      <p class="news-info">
        <span>发布时间: {{ news.dt_create }}</span>
        <span>阅读量: {{ news.count }}</span>
      </p>
      <img :src="news.img" alt="新闻图片" class="news-img" />
      <p class="news-content">{{ news.content }}</p>
    </div>
  </div>
</template>

<script>
import { getNewsDetailByIdAPI } from "@/api/news.js";

export default {
  props: ["id"],
  data() {
    return {
      news: {},
    };
  },
  created() {
    this.getNewsDetail();
  },
  methods: {
    getNewsDetail() {
      getNewsDetailByIdAPI(this.id).then((result) => {
        this.news = result.data;
      });
    },
  },
};
</script>

<style scoped>
.news-detail {
  padding: 20px;
}
.news-info {
  display: flex;
  justify-content: space-between;
  color: #999;
  margin-bottom: 10px;
}
.news-img {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}
.news-content {
  line-height: 1.6;
}
</style>